import React from "react";
import {Form, Input, InputNumber, Radio, Modal, Cascader,TextArea} from "antd";


const DepAeModal = ({item = {}, onOk, form, ...modalProps}) => {

  const  {getFieldDecorator, validateFields, getFieldsValue,resetFields} = form

  console.log(form)

  const hidden = {}
  hidden.id = item.id

  const handleOk = () => {
    validateFields(errors => {
      if (errors) {
        return
      }

      const data = {
        ...getFieldsValue(),
        key: item.key
      }

      if(hidden.id){
        data.id = hidden.id
      }
      onOk(data);
    })
  }

  const Item = Form.Item
  const itemLayout = {
    labelCol: {span: 6,},
    wrapperCol: {span: 14,},
  }



  console.log(item);

  const handleCancel =() => {

    console.log('cancel');

    resetFields()
    modalProps.onCancel()
  }

  return (
    <Modal onOk={handleOk} {...modalProps} onCancel={handleCancel}  width={700}>
      <Form layout="horizontal">
        <Item label="用户名" hasFeedback {...itemLayout}>
          {
            getFieldDecorator('username', {
              initialValue: item.username,
              rules: [{required: true}]
            })(<Input/>)
          }
        </Item>
        <Item label="真实姓名" hasFeedback {...itemLayout}>
          {
            getFieldDecorator('name', {
              initialValue: item.name,
              rules: [{required: true}]
            })(<Input/>)
          }
        </Item>
        <Item label="所属部门" hasFeedback {...itemLayout}>
        {/* {getFieldDecorator('address', {
            initialValue: item.address && item.address.split(' '),
            rules: [
              {
                required: true,
              },
            ],
          })(<Cascader
            size="large"
            style={{ width: '100%' }}
            placeholder="Pick an address"
          />)} */}

        </Item>
        <Item label="用户类型(角色)" hasFeedback {...itemLayout}>

        </Item>
        <Item label="性别" hasFeedback {...itemLayout}>
          {
            <Radio.Group>
              <Radio value>男</Radio>
              <Radio value={false}>女</Radio>
            </Radio.Group>
          }
        </Item>
        <Item label="手机" hasFeedback {...itemLayout}>
          {
            getFieldDecorator('phone', {
              initialValue: item.phone,
              rules: []
            })(<Input/>)
          }
        </Item>
        <Item label="电话" hasFeedback {...itemLayout}>
        {
            getFieldDecorator('tel', {
              initialValue: item.tel,
              rules: []
            })(<Input/>)
          }
        </Item>
        <Item label="qq" hasFeedback {...itemLayout}>
        {
            getFieldDecorator('qq', {
              initialValue: item.qq,
              rules: []
            })(<Input/>)
          }
        </Item>
        <Item label="邮件" hasFeedback {...itemLayout}>
        {
            getFieldDecorator('email', {
              initialValue: item.email,
              rules: []
            })(<Input/>)
          }
        </Item>
        <Item label="身份证" hasFeedback {...itemLayout}>
        {
            getFieldDecorator('cardNo', {
              initialValue: item.cardNo,
              rules: []
            })(<Input/>)
          }
        </Item>
        <Item label="备注" hasFeedback {...itemLayout}>
        {
            getFieldDecorator('comment', {
              initialValue: item.comment,
              rules: []
            })(<Input/>)
          }
        </Item>
      </Form>

    </Modal>
  );


}


export default Form.create()(DepAeModal)
